Hello World APP

 In this tutorial, you'll learn how to build the simplest Android app: Hello World. It's a great place to start making Android apps.

Hello World Android Application

First, here's a peek at what we'll be building. The completed Android hello world application will look like this:

completed hello world app

To create this simplest Android app, just follow along with the steps in this tutorial.

Create the App Project

Launch Android Studio, and you should see a welcome page, as shown below. 

Android homepage

On the welcome page above, click Start a new Android Studio project. The next window presents the activities page, as shown below.

Android activities

Create a Hello World Activity

Android Studio provides activity templates to help you get started. For the Hello World project, choose Empty Activity and click Next.

An activity is a crucial component of any Android app. It provides a screen with which users can interact to perform activities, such as making a phone call, taking a photo, or sending a message. Each Activity has a window in which to draw its user interface. The window typically fills the screen, but it may be smaller than the screen and float on top of other windows.

Configure the Hello World Project Details

We'll finish creating the project by configuring some details about its name, location, and the API version it uses.

configure android project
  • Change the name of the application.
  • Change the default Project location to your preferred directory or just leave it as the default location.
  • On the minimum API level, ensure that API 15: Android 4.0.3 IceCreamSandwich is set as the Minimum SDK. This ensures that your application runs on almost all devices.

Click Finish.

The Gradle Build System

Each time you create a new application, Android Studio creates a folder for your projects and builds the project with its Gradle system. The Gradle process may take a few moments. Gradle is Android's build system, which is responsible for the compilation, testing, and deployment of code. It makes it possible for the app to run on the device.

Explaining the Files in an Android App Project

Whenever you start a new project, Android Studio creates the necessary folder structure and files for that app. Let's look at the different files involved in an Android app project.

project overview

The manifests Folder

The manifests folder contains the AndroidManifest.xml file. The manifest file describes essential information about your application. 

The java Folder

This folder contains the Java source code files. As you can see from the editor window above, the MainActivity.java file contains the Java source code for the app's main Activity.

The res Folder

This folder includes all non-code resources, such as:

  • layouts: Layouts are XML files that define the architecture for the UI in an Activity or a component of a UI. For example, in our application, the activity_main.xml file corresponds to the main Activity.
  • values: Contains the color, style, and string XML files for the application.
  • drawable: This is a catch-all for graphics that can be drawn on the screen, e.g. images.
  • build.gradle: This is an auto-generated file which contains details of the app such as the SDK version, build tools version, application ID, and more.

Coding the Hello World App

Now that you have a general view of the project structure, let's describe the most critical component files that constitute the hello world application. 

The Default Main Activity

The main activity is the first screen that will appear when you launch your app.

Each Activity represents a screen of the Android app's user interface. Each Activity has a Java (or Kotlin) implementation file and an XML layout file.

The Default Main Activity Java Code

Below is the default Java code generated by the application for the main activity.

1

In Java class:

2
package com.example.helloworldapplication;
3
import androidx.appcompat.app.AppCompatActivity;
4
5
import android.os.Bundle;
6
7
public class MainActivity extends AppCompatActivity {
8
9
    @Override
10
    protected void onCreate(Bundle savedInstanceState) {
11
        super.onCreate(savedInstanceState);
12
        setContentView(R.layout.activity_main);
       TextView textView = (TextView) findViewById(R.id.textView);
        textView.setText("Hello World"); //set text for text view.
13

    }
14
}

You don't need to understand this code fully. A lot of it is boilerplate and will be the same for any app. The code defines a MainActivity class and, along with the onCreate method, defines what happens when the Activity is created. In this case, it simply initializes the view of the Activity with the layout from the activity_main layout file.

Attributes of TextView:

Now let’s we discuss about the attributes that helps us to configure a TextView in your xml file.

1. id: id is an attribute used to uniquely identify a text view. Below is the example code in which we set the id of a text view.

<TextView
android:id="@+id/simpleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

2. gravity: The gravity attribute is an optional attribute which is used to control the alignment of the text like left, right, center, top, bottom, center_vertical, center_horizontal etc.

Below is the example code with explanation included in which we set the center_horizontal gravity for text of a TextView.

In Java class:

Below is the example code in which we set the text in a textview programmatically means in java class.

TextView textView = (TextView)findViewById(R.id.textView);
textView.setText("AbhiAndroid"); //set text for text view
<TextView
android:id="@+id/simpleTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="AbhiAndroid"
android:textSize="20sp"
android:gravity="center_horizontal"/> <!--center horizontal gravity-->

4. textColor: textColor attribute is used to set the text color of a text view. Color value is in the form of “#argb”, “#rgb”, “#rrggbb”, or “#aarrggbb”.

Below is the example code with explanation included in which we set the red color for the displayed text.

<TextView
android:id="@+id/simpleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AbhiAndroid"
android:layout_centerInParent="true"
android:textSize="25sp"
android:textColor="#f00"/><!--red color for text view-->


In Java class:

Below is the example code in which we set the text color of a text view programmatically means in java class.

TextView textView = (TextView)findViewById(R.id.textView);
textView.setTextColor(Color.RED); //set red color for text view

5. textSize: textSize attribute is used to set the size of text of a text view. We can set the text size in sp(scale independent pixel) or dp(density pixel).

Below is the example code in which we set the 20sp size for the text of a text view.

<TextView
    android:id="@+id/simpleTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hellow world"
    android:layout_centerInParent="true"
    android:textSize="40sp" /><!--Set size-->


In Java class:

Below is the example code in which we set the text size of a text view programmatically means in java class.

TextView textView = (TextView)findViewById(R.id.textView);
textView.setTextSize(20); //set 20sp size of text

6. textStyle: textStyle attribute is used to set the text style of a text view. The possible text styles are bold, italic and normal.  If we need to use two or more styles for a text view then “|” operator is used for that.

Below is the example code with explanation included in which we  set the bold and italic text styles for text.

<TextView
    android:id="@+id/simpleTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello world"
    android:layout_centerInParent="true"
    android:textSize="40sp"
    android:textStyle="bold|italic"/><!--bold and italic text style of text-->


7. background: background attribute is used to set the background of a text view. We can set a color or a drawable in the background of a text view.

8. padding: padding attribute is used to set the padding from left, right, top or bottom. In above example code of background we also set the 10dp padding from all the side’s of text view.

Below is the example code with explanation included in which we set the black color for the background, white color for the displayed text and set 10dp padding from all the side’s for text view.

<TextView
android:id="@+id/simpleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello world"
android:layout_centerInParent="true"
android:textSize="40sp" 
android:padding="10dp"
android:textColor="#fff"
android:background="#000"/> <!--red color for background of text view-->


In Java class:

Below is the example code in which we set the background color of a text view programmatically means in java class.

TextView textView = (TextView)findViewById(R.id.textView);
textView.setBackgroundColor(Color.BLACK);//set background color

The Default Layout XML File

XML files are used for layouts. The main Activity layout XML file is found in the project's /app/src/main/res/layout directory. Layout files are named after what they represent. For example, the Hello World application has one layout, which is the  activity_main.xml named after the main Activity.

Here is the default activity_main.xml layout. It contains one text view element, with the text Hello World!

1

Activity.xml

2
<?xml version="1.0" encoding="utf-8"?>
3
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"
4
   xmlns:app="http://schemas.android.com/apk/res-auto"
5
   xmlns:tools="http://schemas.android.com/tools"
6
   android:layout_width="match_parent"
7
   android:layout_height="match_parent"
8
   tools:context=".MainActivity">
9
10
   <TextView
11
       android:layout_width="wrap_content"
12
       android:layout_height="wrap_content"
13
       android:text="Hello World!"
14
      
/>
18
19
</androidx.constraintlayout.widget.ConstraintLayout>

Running the Application

Connect your Android device to your computer with a USB cable. The right connection type should show up as connected as a media device.

You'll also need developer options enabled on your device. If this is not already enabled, follow these steps (this will work on most Android devices):

  • Open up the Settings menu on your Android phone and scroll to the bottom. 
  • Tap About phone and scroll down again until you see the Build number option.
  • Tap the Build number multiple times. Soon, you should see a pop-up that reads something similar to You are five taps away from being a developer.
  • Keep tapping until the pop-up says you're a developer. 
  • Go back to the main Settings > System > Advanced. Developer options should be the second-last option. Turn the Developer options on.

In Android Studio, navigate to the top menu and select Run 'app'. Android Studio will show a dialog where you can choose which device to run your Android app on. Choose your connected device and click the OK button.

The Hello World application should now be running on your phone. From here, you can make modify your app to whatever you want and add more features.

hello world app

Conclusion

In this tutorial, I showed you how to install Android Studio and create your first app: Hello World, the simplest Android app

Post a Comment

0 Comments